<template>
  <div class="MayDay">
    <navigation image_="0" title="五一劳动节" :show="true" :scrollTop="false">
      <template slot="tishi">
        <img @click="tomybackpack" src="https://img.xunyinjiaoyou.com/static/activity/ObtainShells/sign_help_icon.png"
          alt="" />
      </template>
    </navigation>
    <div class="active_header">
      <img class="center_title" src="https://img.xunyinjiaoyou.com/static/activity/MayDay/work_title.png" alt="" />
      <div class="mode_result" @click="huodong(1)">
        <img src="https://img.xunyinjiaoyou.com/static/activity/MayDay/work_reward_btn.png" alt="" />
        <span>活动奖励</span>
      </div>
      <div class="tabber_active">
        <div :class="cur == '1' ? 'active' : ''" @click="tabber_cur(1)">
          出游榜
        </div>
        <div :class="cur == '2' ? 'active' : ''" @click="tabber_cur(2)">
          宅家榜
        </div>
        <div :class="cur == '3' ? 'active' : ''" @click="tabber_cur(3)">
          每日任务
        </div>
      </div>
      <div class="top_center_list">
        <img v-if="cur == '1' || cur == '3'" class="bg1"
          src="https://img.xunyinjiaoyou.com/static/activity/MayDay/bg1.png" alt="" />
        <img v-if="cur == '1' || cur == '3'" class="bg2"
          src="https://img.xunyinjiaoyou.com/static/activity/MayDay/bg2.png" alt="" />
        <img v-if="cur == '2'" class="bg1" src="https://img.xunyinjiaoyou.com/static/activity/MayDay/bg4.png" alt="" />
        <img v-if="cur == '2'" class="bg2" src="https://img.xunyinjiaoyou.com/static/activity/MayDay/bg5.png" alt="" />
        <span v-if="cur == '1'">活动期间送出钻石礼物获得礼物值(1钻石=1礼物值)</span>
        <span v-if="cur == '2'">活动期间收到钻石礼物获得礼物值(1钻石=1礼物值)</span>
        <span v-if="cur == '3'">活动期间每日送出或收到钻石礼物获得礼物值</span>
      </div>
    </div>
    <div :class="
        cur == '1' || cur == '3' ? 'center_list' : 'center_list center_list2'
      ">
      <template v-if="cur == '1' || cur == '2'">
        <div class="single_data" v-for="(item, index) in rankList" :key="index"
          @click="open_usrt(item.user_id.toString())">
          <img class="ba_aps" v-if="cur == '1' && item.rank == '1'"
            src="https://img.xunyinjiaoyou.com/static/activity/MayDay/rank1_bg.png" alt="" />
          <img class="ba_aps" v-else-if="cur == '1' && item.rank != '1'"
            src="https://img.xunyinjiaoyou.com/static/activity/MayDay/rank2_bg.png" alt="" />
          <img class="ba_aps" v-else-if="cur == '2' && item.rank == '1'"
            src="https://img.xunyinjiaoyou.com/static/activity/MayDay/zhaijia_top1_frame.png" alt="" />
          <img class="ba_aps" v-else-if="cur == '2' && item.rank != '1'"
            src="https://img.xunyinjiaoyou.com/static/activity/MayDay/zu.png" alt="" />
          <div class="rank">
            <img v-if="item.rank < 4" src="https://img.xunyinjiaoyou.com/static/activity/MayDay/clover_img.png"
              alt="" />
            <span :class="item.rank < 4 ? 'text_show' : ''">{{
              item.rank
            }}</span>
          </div>
          <div class="header_pic">
            <div class="header">
              <img v-if="item.rank == '1'" src="https://img.xunyinjiaoyou.com/static/activity/MayDay/rank1_frame.png"
                alt="" />
              <img v-if="item.rank == '2'" src="https://img.xunyinjiaoyou.com/static/activity/MayDay/rank2_frame.png"
                alt="" />
              <img v-if="item.rank == '3'" src="https://img.xunyinjiaoyou.com/static/activity/MayDay/rank3_frame.png"
                alt="" />

              <img class="header_img" :src="item.head_pic" alt=""
                :style="item.rank > '3' ? 'border:1px solid #C5F4FE' : ''" />
            </div>
            <div class="Talent" v-if="item.rank == '1' && cur == '1'">
              <img src="https://img.xunyinjiaoyou.com/static/activity/MayDay/lvyou_la.png" alt="" />
              <span>旅游达人</span>
            </div>
            <div class="Talent" v-if="item.rank == '1' && cur == '2'">
              <img src="https://img.xunyinjiaoyou.com/static/activity/MayDay/tangpin_lab.png" alt="" />
              <span>躺平达人</span>
            </div>
          </div>
          <div class="name_information van-ellipsis">
            <span>{{ item.nickname }}</span>
            <span v-if="item.rank == '1' && cur == '1'">旅游达人</span>
            <span v-else-if="item.rank == '1' && cur == '2'">躺平达人</span>
            <span v-else>距上名相差{{ format(item.distance_charm) }}礼物值</span>
          </div>
        </div>
      </template>
      <template v-else>
        <div class="task_meiri">
          <div class="top_cenzhuan">(1钻石=1礼物值)</div>
          <div class="Maydaydate">
            <div :class="days >= index ? 'data_imdex data_imdexba' : 'data_imdex'" v-for="index in 5" :key="index">
              <span>5.{{ index }}</span>
            </div>
          </div>
          <div class="body_center">
            <div class="left_clorm">
              <span>10,000</span>
              <span>
                <span>30,000</span>
                <span>还差{{
                    mayDayDays > "30000" ? 0 : 30000 - mayDayDays
                  }}礼物值</span>
              </span>
            </div>
            <div class="center_body">
              <div class="progressBar progress">
                <div class="progress-bar progress-bar-info" :style="'height:' + math() + '%'"></div>
                <img src="https://img.xunyinjiaoyou.com/static/activity/MayDay/clover_img.png"
                  :style="'top:' + math() + '%'" alt="" />
              </div>
              <div class="Grade">
                <span>LV1</span>
                <span>LV2</span>
              </div>
            </div>
            <div class="right_image">
              <div class="img_ab1">
                <div class="title_icon">1天</div>
                <img class="gift_img" src="https://img.xunyinjiaoyou.com/static/activity/MayDay/RainbowAfterRain.png"
                  alt="" />
                <div class="mask_image" v-if="mayDayDays < 10000">
                  <img src="https://img.xunyinjiaoyou.com/static/activity/MayDay/giftgray_frame.png" alt="" />
                  <img src="https://img.xunyinjiaoyou.com/static/activity/MayDay/lock_img.png" alt="" />
                </div>
              </div>
              <div class="img_ab1">
                <div class="title_icon">3天</div>
                <img class="gift_img" src="https://img.xunyinjiaoyou.com/static/activity/MayDay/RainbowAfterRain.png"
                  alt="" />
                <div class="mask_image" v-if="mayDayDays < 30000">
                  <img src="https://img.xunyinjiaoyou.com/static/activity/MayDay/giftgray_frame.png" alt="" />
                  <img src="https://img.xunyinjiaoyou.com/static/activity/MayDay/lock_img.png" alt="" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </template>
      <div :class="cur < '3' ? 'text_huodong' : 'text_huodong text_huodongTop'"
        :style="rankList.length < 3 ? 'padding-top:48vw' : ''">
        本活动最终解释权归声贝所有{{ isiOS ? ",与苹果公司无关" : "" }}
      </div>
      <div v-if="cur == '1' || cur == '3'" class="bottom_bg3"></div>
      <div v-else class="bottom_bg6"></div>
    </div>

    <div class="bottom_myrank">
      <div class="ac_list">
        <div class="head_border">
          <img v-if="myRankInfo" class="hea_pic" :src="myRankInfo.headPic" alt="" />
        </div>
        <div class="rank_pm">
          <div class="clorm_cleve" v-if="myRankInfo.level">
            <img :src="getImgUrl(myRankInfo.level)" alt="" srcset="" />
            <img :src="getImgUrl2(myRankInfo.trainerLevel)" alt="" srcset="" />
            <span>{{ myRankInfo.nickname }}</span>
          </div>
          <div class="text_name">
            距上名相差{{ format(myRankInfo.distanceCharm) }}礼物值
          </div>
        </div>
        <div class="rank_lis">{{ myRankInfo.rankDesc }}</div>
      </div>
    </div>

    <van-popup v-model="rule_model" :close-on-click-overlay="false">
      <div class="reward">
        <div class="close_" @click="close_model">
          <img src="https://img.xunyinjiaoyou.com/static/activity/MayDay/popup_close_icon.png" alt="" />
        </div>
        <div class="center_jiangli">
          <img src="https://img.xunyinjiaoyou.com/static/activity/MayDay/work_reward_btn.png" alt="" />
          <span v-if="active_index == '1'">榜单奖励</span>
          <span v-else>活动规则</span>
        </div>
        <div class="heder_img">
          <img src="https://img.xunyinjiaoyou.com/static/activity/MayDay/bg1.png" alt="" />
          <div class="body_center" v-if="active_index == '1'">
            <div class="darone">
              <img src="https://img.xunyinjiaoyou.com/static/activity/MayDay/title_frame.png" alt="" />
              <span>旅游达人第一名</span>
            </div>
            <div class="jiangli_gift">
              <div class="bg_imgkuang">
                <div class="gift_icon">
                  <img class="liaohoa" src="https://img.xunyinjiaoyou.com/static/activity/MayDay/number1_img.png"
                    alt="" />
                </div>
                <div class="gift_bottom">
                  <span>限定靓号</span>
                </div>
              </div>
              <div class="bg_imgkuang">
                <div class="gift_icon">
                  <img src="https://img.xunyinjiaoyou.com/static/activity/MayDay/RainbowAfterRain.png" alt="" />
                </div>
                <div class="gift_bottom">
                  <span>雨过天晴*10天</span>
                </div>
              </div>
            </div>
            <div class="darone">
              <img src="https://img.xunyinjiaoyou.com/static/activity/MayDay/title_frame.png" alt="" />
              <span>躺平达人第一名</span>
            </div>
            <div class="jiangli_gift">
              <div class="bg_imgkuang">
                <div class="gift_icon">
                  <img class="liaohoa" src="https://img.xunyinjiaoyou.com/static/activity/MayDay/number2_im.png"
                    alt="" />
                </div>
                <div class="gift_bottom">
                  <span>限定靓号</span>
                </div>
              </div>
              <div class="bg_imgkuang">
                <div class="gift_icon">
                  <img src="https://img.xunyinjiaoyou.com/static/activity/MayDay/RainbowAfterRain.png" alt="" />
                </div>
                <div class="gift_bottom">
                  <span>雨过天晴*10天</span>
                </div>
              </div>
            </div>
            <div class="darone">
              <img src="https://img.xunyinjiaoyou.com/static/activity/MayDay/title_frame.png" alt="" />
              <span>达人第2-3名</span>
            </div>
            <div class="jiangli_gift" style="justify-content: center">
              <div class="bg_imgkuang">
                <div class="gift_icon">
                  <img src="https://img.xunyinjiaoyou.com/static/activity/MayDay/RainbowAfterRain.png" alt="" />
                </div>
                <div class="gift_bottom">
                  <span>雨过天晴*7天</span>
                </div>
              </div>
            </div>
            <div class="darone">
              <img src="https://img.xunyinjiaoyou.com/static/activity/MayDay/title_frame.png" alt="" />
              <span>达人第4-10名</span>
            </div>
            <div class="jiangli_gift" style="justify-content: center">
              <div class="bg_imgkuang">
                <div class="gift_icon">
                  <img src="https://img.xunyinjiaoyou.com/static/activity/MayDay/RainbowAfterRain.png" alt="" />
                </div>
                <div class="gift_bottom">
                  <span>雨过天晴*5天</span>
                </div>
              </div>
            </div>
          </div>
          <div class="time_huodong" v-else>
            <div class="center_rule">
              <img src="https://img.xunyinjiaoyou.com/static/activity/MayDay/left_.png" alt="" />
              <span>活动时间</span>
              <img src="https://img.xunyinjiaoyou.com/static/activity/MayDay/right_.png" alt="" />
            </div>
            <div class="time_shijang">2022.05.01 00:00-2022.05.05 23:59</div>
            <div class="center_rule">
              <img src="https://img.xunyinjiaoyou.com/static/activity/MayDay/left_.png" alt="" />
              <span>活动玩法</span>
              <img src="https://img.xunyinjiaoyou.com/static/activity/MayDay/right_.png" alt="" />
            </div>
            <div class="result">
              <span>各榜以礼物值从高到低排序</span>
              <span>1钻石=1礼物值</span>
              <span>必须是直刷的礼物才算入榜单内哦~</span>
              <span>榜单数据以服务器时间为准</span>
              <span>若多用户分值相同,则先到者靠前</span>
              <span>祝大家五一快乐~</span>
            </div>
            <div class="interpretation">
              本活动最终解释权归声贝所有{{ isiOS ? ",与苹果公司无关" : "" }}
            </div>
          </div>
          <img src="https://img.xunyinjiaoyou.com/static/activity/MayDay/bg3.png" alt="" />
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
  import {
    Toast,
    Dialog
  } from "vant";
  import navigation from "../../components/navigation";
  export default {
    data() {
      return {
        cur: 1,
        rankList: [],
        myRankInfo: {},
        rule_model: false,
        days: 0,
        mayDayDays: 0, //每日任务
        active_index: 1, //1奖励2规则
        isiOS: false,
      };
    },
    components: {
      navigation,
    },
    created() {
      this.isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
      this.index();
    },
    methods: {
      math() {
        if (this.mayDayDays < 10000) {
          return (this.mayDayDays / 10000) * 100 * 0.5;
        } else if (this.mayDayDays < 30000) {
          return (this.mayDayDays / 20000) * 100 * 0.5 + 25;
        } else {
          return 100;
        }
      },
      huodong(e) {
        this.active_index = 1;
        this.rule_model = true;
      },
      tomybackpack() {
        this.active_index = 2;
        this.rule_model = true;
      },
      getImgUrl(img) {
        let imgurl =
          "https://xunyinjiaoyou.oss-cn-qingdao.aliyuncs.com/static/level3/level" +
          img +
          ".png";
        return imgurl;
      },
      getImgUrl2(img) {
        let imgurl =
          "https://xunyinjiaoyou.oss-cn-qingdao.aliyuncs.com/static/charm3/charm" +
          img +
          ".png";
        return imgurl;
      },
      format(value) {
        if (value > 1000) {
          return value / 1000 + "k";
        } else {
          return value;
        }
      },
      tabber_cur(cur) {
        this.cur = cur;
        cur != "3" ? this.index() : this.mayDayDays_();
      },

      close_model() {
        this.rule_model = false;
      },
      mayDayDays_() {
        this.mayDayDays = 0;
        let arys = {}; //参数
        let url = "/activity/mayDayDays";
        this.$.encryption2(arys, url).then((res) => {
          if (res.data.status == 0) {
            this.mayDayDays = res.data.result.myCharm;
            this.days = res.data.result.days;
          } else {
            Toast(res.data.text);
          }
        });
      },
      //点击头像进入个人主页
      open_usrt(user) {
        if (window.isiOS) {
          console.log("isiOS环境");
          window.webkit.messageHandlers.openProfile.postMessage({
            userId: user,
          });
        } else {
          console.log("安卓环境");
          app.openProfile(user);
        }
      },
      index() {
        let arys = {
          type: this.cur,
        }; //参数
        let url = "/activity/mayDayIndex";
        this.$.encryption2(arys, url).then((res) => {
          if (res.data.status == 0) {
            this.rankList = res.data.result.rankList;
            this.myRankInfo = res.data.result.myRankInfo;
          } else {
            Toast(res.data.text);
          }
        });
      },
    },
  };
</script>
<style scoped lang="less">
  @auto: 0 auto;

  .pxToVW (@px, @attr: width) {
    @vw: (unit(round((@px / 8.28) * 100)) / 100);
    @{attr}:~"@{vw}vw";
  }

  .fs (@px, @attr: font-size) {
    @vw: (unit(round((@px / 8.25) * 100)) / 100);
    @{attr}:~"@{vw}vw";
  }

  .MayDay {
    width: 100vw;
    background: #50bcff;
    position: relative;
  }

  .active_header {
    width: 100vw;
    .pxToVW(1100, height);
    background: url("https://img.xunyinjiaoyou.com/static/activity/MayDay/work_bg.png") no-repeat;
    background-size: contain;
    display: flex;
    align-items: center;
    flex-direction: column;
    position: relative;
    z-index: 9;

    .center_title {
      position: absolute;
      .pxToVW(208, top);
      .pxToVW(738);
      .pxToVW(398, height);
    }

    .mode_result {
      position: absolute;
      .pxToVW(162);
      .pxToVW(62, height);
      .pxToVW(226, top);
      .pxToVW(20, right);
      display: flex;
      align-items: center;
      justify-content: center;

      img {
        position: absolute;
        width: 100%;
      }

      span {
        font-family: PingFang SC;
        font-weight: 400;
        color: #ffffff;
        .fs(32);
        z-index: 9;
      }
    }

    .tabber_active {
      position: absolute;
      width: 100vw;
      .pxToVW(92, height);
      .pxToVW(176, bottom);
      background: url("https://img.xunyinjiaoyou.com/static/activity/MayDay/work_title_frame.png") no-repeat;
      background-size: cover;
      display: flex;
      justify-content: center;

      .active {
        background: url("https://img.xunyinjiaoyou.com/static/activity/MayDay/chuyou_select_btn.png") no-repeat;
        background-size: contain;
        .fs(44);
        text-shadow: 0px 1.5px 0px rgba(204, 83, 0, 0.35);
      }

      >div {
        width: 33%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        .fs(40);
        font-family: Adobe Heiti Std;
        font-weight: bold;
        font-style: italic;
        color: #ffffff;
        text-shadow: 0px 3px 3px #14808c;
      }
    }

    .top_center_list {
      position: absolute;
      bottom: 0%;
      .pxToVW(148, height);
      .pxToVW(798);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      .bg1 {
        width: 100%;
      }

      .bg2 {
        width: 100%;
        .pxToVW(25, height);
      }

      span {
        position: absolute;
        font-family: Adobe Heiti Std;
        font-weight: normal;
        color: #ffffff;
        .fs(28);
        .pxToVW(24, bottom);
      }
    }
  }

  .center_list {
    .pxToVW(798);
    margin: @auto;
    .pxToVW(-2, margin-top);
    display: flex;
    flex-direction: column;
    background: url("https://img.xunyinjiaoyou.com/static/activity/MayDay/bg2.png");
    background-size: contain;

    .single_data {
      flex-shrink: 0;
      .pxToVW(754);
      .pxToVW(152, height);
      margin: @auto;
      .pxToVW(20, margin-top);
      display: flex;
      // background: url("https://img.xunyinjiaoyou.com/static/activity/MayDay/rank2_bg.png") no-repeat;
      // background-size: contain;
      align-items: center;
      position: relative;

      .ba_aps {
        .pxToVW(754);
        position: absolute;
        z-index: 0;
      }

      .rank {
        .pxToVW(60);
        .pxToVW(58, height);
        .pxToVW(50, margin-left);
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;

        img {
          position: absolute;
          width: 100%;
          height: 100%;
        }

        span {
          position: absolute;
          font-family: PingFang SC;
          font-weight: 600;
          font-style: italic;
          color: #ffffff;
          .fs(50);
        }

        .text_show {
          position: absolute;
          -webkit-text-stroke: 0.5px #01c81d;
          text-stroke: 0.5px #01c81d;
          font-family: PingFang SC;
          font-weight: 600;
          font-style: italic;
          color: #ffffff;
          .fs(34);
        }
      }

      .header_pic {
        .pxToVW(182, height);
        height: 100%;
        display: flex;
        .pxToVW(14, margin-top);
        .pxToVW(32, margin-left);
        // background: #000;
        display: flex;
        flex-direction: column;
        position: relative;
        align-items: center;

        .header {
          .pxToVW(120);
          .pxToVW(120, height);
          display: flex;
          position: relative;
          align-items: center;
          justify-content: center;
          flex-shrink: 0;

          img {
            width: 100%;
            position: absolute;
            z-index: 1;
          }

          .header_img {
            z-index: 0;
            position: absolute;
            border-radius: 50%;
            width: 88%;
            height: 88%;
            .pxToVW(12, left);
            .pxToVW(14, top);
            // border-radius: 50%;
            // border: 1px solid #005756;
          }
        }

        .Talent {
          .pxToVW(118);
          .pxToVW(36, height);
          position: absolute;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-shrink: 0;
          .pxToVW(10, bottom);
          .pxToVW(8, left);
          z-index: 10;

          img {
            position: absolute;
            width: 100%;
          }

          span {
            font-family: Adobe Heiti Std;
            font-weight: normal;
            color: #ffffff;
            .fs(20);
            position: absolute;
            transform: scale(0.8);
          }
        }
      }

      .name_information {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        flex: 1;
        height: 60%;
        .pxToVW(48, margin-left);
        z-index: 1;

        >span:nth-of-type(1) {
          font-family: PingFang SC;
          font-weight: 500;
          color: #ffffff;
          .fs(32);
          width: 100%;
        }

        >span:nth-of-type(2) {
          font-family: PingFang SC;
          font-weight: 400;
          color: #ffffff;
          .fs(28);
        }
      }
    }

    .task_meiri {
      .pxToVW(754);
      margin: @auto;
      position: relative;

      >.top_cenzhuan {
        width: 100%;
        text-align: center;
        font-size: 28px;
        font-family: Adobe Heiti Std;
        font-weight: normal;
        color: #ffffff;
        .fs(28);
        text-align: center;
        position: absolute;
        .pxToVW(-20, top);
        z-index: 9;
      }

      .Maydaydate {
        width: 96%;
        .pxToVW(75, height);
        margin: @auto;
        .pxToVW(50, margin-top);
        .pxToVW(40, margin-right);
        display: flex;
        justify-content: center;

        .data_imdex {
          flex-shrink: 0;
          .pxToVW(180);
          .pxToVW(75, height);
          background: url("https://img.xunyinjiaoyou.com/static/activity/MayDay/date_frame_gray.png") no-repeat;
          background-size: contain;
          .pxToVW(-40, margin-right);
          display: flex;
          align-items: center;
          justify-content: center;
          .fs(40);
          font-family: PingFang SC;
          font-weight: 400;
          color: #ffffff;
        }

        .data_imdexba {
          background: url("https://img.xunyinjiaoyou.com/static/activity/MayDay/date1_frame.png") no-repeat;
          background-size: contain;
        }
      }

      .body_center {
        width: 96%;
        .pxToVW(920, height);
        margin: @auto;
        display: flex;

        .left_clorm {
          width: 40%;
          height: 100%;
          display: flex;
          align-items: center;
          flex-direction: column;

          >span {
            font-family: PingFang SC;
            font-weight: 600;
            font-style: italic;
            color: #ffffff;
            .fs(60);
            .pxToVW(240, padding-top);
            display: flex;
            flex-direction: column;

            >span:nth-of-type(2) {
              .fs(28);
              font-weight: 400;
            }
          }
        }

        .center_body {
          width: 10%;
          height: 100%;
          display: flex;
          justify-content: center;
          position: relative;

          .Grade {
            position: absolute;
            width: 10vw;
            .pxToVW(700, height);
            .pxToVW(-80, left);
            .pxToVW(40, margin-top);
            display: flex;
            justify-content: center;
            font-family: PingFang SC;
            font-weight: 500;
            color: #ffffff;
            .fs(40);

            >span:nth-of-type(1) {
              position: absolute;
              top: 43%;
            }

            >span:nth-of-type(2) {
              position: absolute;
              top: 94%;
            }
          }
        }

        .right_image {
          width: 50%;
          height: 100%;
          position: relative;

          >div:nth-of-type(1) {
            .pxToVW(188, margin-top);
          }

          >div:nth-of-type(2) {
            .pxToVW(98, margin-top);
          }

          .img_ab1 {
            .pxToVW(342, width);
            .pxToVW(302, height);
            background: url("https://img.xunyinjiaoyou.com/static/activity/MayDay/gift_frame.png") no-repeat;
            background-size: cover;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;

            .title_icon {
              position: absolute;
              padding: 0px 6px;
              .pxToVW(18, border-radius);
              .pxToVW(22, top);
              .pxToVW(30, left);
              background: #88ff80;
              .fs(34);
              font-family: PingFang SC;
              font-weight: 500;
              color: #005756;
            }

            .gift_img {
              .pxToVW(224);
              .pxToVW(224, height);
              position: absolute;
              top: 20%;
            }

            .mask_image {
              width: 100%;
              height: 100%;
              position: absolute;
              display: flex;
              justify-content: center;
              align-items: center;

              img:nth-of-type(1) {
                width: 94%;
                height: 95%;
                position: absolute;
                bottom: 0%;
                left: 1.3%;
              }

              img:nth-of-type(2) {
                .pxToVW(46);
                .pxToVW(62, height);
              }
            }
          }
        }
      }
    }

    .single_data_nth {
      background: url("https://img.xunyinjiaoyou.com/static/activity/MayDay/rank1_bg.png") no-repeat;
      background-size: cover;
      .pxToVW(754);
      .pxToVW(168, height);
    }

    .text_huodong {
      font-family: PingFang SC;
      font-weight: 400;
      color: #ffffff;
      .fs(24);
      text-align: center;
      .pxToVW(26, padding-top);
    }

    .text_huodongTop {
      padding-top: 0vw !important;
    }

    .bottom_bg3 {
      .pxToVW(798);
      .pxToVW(78, height);
      background: url("https://img.xunyinjiaoyou.com/static/activity/MayDay/bg3.png") no-repeat;
      background-size: cover;
    }

    .bottom_bg6 {
      .pxToVW(798);
      .pxToVW(78, height);
      background: url("https://img.xunyinjiaoyou.com/static/activity/MayDay/bg6.png") no-repeat;
      background-size: cover;
    }
  }

  .center_list2 {
    background: url("https://img.xunyinjiaoyou.com/static/activity/MayDay/bg5.png");
    background-size: contain;
  }

  .bottom_myrank {
    width: 100vw;
    .pxToVW(160, height);
    .pxToVW(32, margin-top);
    background: linear-gradient(0deg, #1ab686, #08a78f);
    border-radius: 10px 10px 0px 0px;

    .ac_list {
      width: 88vw;
      margin: @auto;
      height: 100%;
      display: flex;
      align-items: center;

      .head_border {
        border: 1px solid #ffffff;
        border-radius: 50%;
        .pxToVW(106);
        .pxToVW(106, height);

        .hea_pic {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }

      .rank_pm {
        display: flex;
        flex: 1;
        flex-direction: column;
        justify-content: space-around;
        .pxToVW(50, margin-left);
        height: 70%;

        .clorm_cleve {
          display: flex;
          .pxToVW(50, height);
          align-items: center;

          img {
            .pxToVW(12, margin-right);
            .pxToVW(54);
          }

          span {
            font-size: 32px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #ffffff;
            .fs(32);
          }
        }

        .text_name {
          font-family: PingFang SC;
          font-weight: 400;
          color: #ffffff;
          .fs(28);
        }
      }

      .rank_lis {
        font-family: PingFang SC;
        font-weight: 500;
        color: #ffffff;
        .fs(32);
      }
    }
  }

  .progressBar {
    .pxToVW(30);
    .pxToVW(700, height);
    .pxToVW(15, border-radius);
    .pxToVW(40, margin-top);
    background: #fff;
    position: relative;
    display: flex;
    justify-content: center;

    // overflow: hidden;
    img {
      .pxToVW(60);
      position: absolute;
      z-index: 10;
      margin-top: -55%;
      -webkit-transition: all 0.6s ease;
      -o-transition: all 0.6s ease;
      transition: all 0.6s ease;
    }

    .progress {
      overflow: visible;
    }

    .progress-bar {
      float: left;
      height: 0;
      width: 100%;
      font-size: 12px;
      line-height: 20px;
      color: #88ff80;
      text-align: center;
      background-color: #337ab7;
      -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
      box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
      -webkit-transition: height 0.6s ease;
      -o-transition: height 0.6s ease;
      transition: height 0.6s ease;
    }

    .progress .progress-bar {
      border-radius: 20px;
      position: relative;
      animation: animate-positive 2s;
    }

    .progress-bar-info {
      background-color: #88ff80;
      border-radius: 20px;
    }

    @-webkit-keyframes animate-positive {
      0% {
        width: 0;
      }
    }

    @keyframes animate-positive {
      0% {
        width: 0;
      }
    }
  }

  .reward {
    .pxToVW(730);
    .pxToVW(1034, height);
    position: relative;
    display: flex;
    justify-content: center;

    .close_ {
      .pxToVW(56);
      .pxToVW(56, height);
      .pxToVW(-56, top);
      position: absolute;
      right: 0%;

      img {
        width: 100%;
      }
    }

    .center_jiangli {
      .pxToVW(220);
      .pxToVW(90, height);
      position: absolute;
      display: flex;
      justify-content: center;

      img {
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 8;
      }

      span {
        font-family: PingFang SC;
        font-weight: 400;
        color: #ffffff;
        text-shadow: 0px 2px 4px #005756;
        .fs(42);
        .pxToVW(88, line-height);
        position: absolute;
        z-index: 10;
      }
    }

    .huodong_time {
      width: 100%;
      .pxToVW(988, height);
      .pxToVW(22, margin-top);
      position: relative;
      display: flex;
      flex-direction: column;
    }

    .heder_img {
      width: 100%;
      .pxToVW(988, height);
      .pxToVW(22, margin-top);
      position: relative;
      display: flex;
      flex-direction: column;

      >img:nth-of-type(1) {
        width: 100%;
      }

      >img:nth-of-type(2) {
        position: absolute;
        bottom: 0%;
        width: 100%;
        border-radius: 0 0 10px 10px;
      }

      .time_huodong {
        background: url("https://img.xunyinjiaoyou.com/static/activity/MayDay/bg2.png");
        background-size: contain;
        width: 100%;
        display: flex;
        margin-top: -1px;
        flex-direction: column;
        align-items: center;

        .center_rule {
          .pxToVW(578);
          .pxToVW(50, height);
          display: flex;
          align-items: center;
          justify-content: center;
          margin: @auto;
          .pxToVW(10, margin-top);

          span {
            .pxToVW(12, padding-left);
            .pxToVW(12, padding-right);
            font-family: PingFang SC;
            font-weight: bold;
            color: #ffffff;
            .fs(30);
          }

          >img {
            .pxToVW(32);
            .pxToVW(20, height);
          }
        }

        .result {
          .pxToVW(578);
          display: flex;
          align-items: center;
          justify-content: center;
          margin: @auto;
          .pxToVW(50, margin-top);
          .pxToVW(58, line-height);
          flex-direction: column;

          span {
            font-family: PingFang SC;
            font-weight: 400;
            color: #ffffff;
            .fs(30);
          }
        }

        .time_shijang {
          .pxToVW(578);
          .pxToVW(50, height);
          display: flex;
          align-items: center;
          justify-content: center;
          margin: @auto;
          .pxToVW(50, margin-top);
          .pxToVW(50, margin-bottom);
          font-family: PingFang SC;
          font-weight: 400;
          color: #ffffff;
          .fs(34);
        }

        .interpretation {
          .pxToVW(578);
          .pxToVW(50, height);
          display: flex;
          align-items: center;
          justify-content: center;
          margin: @auto;
          .pxToVW(80, margin-top);
          .pxToVW(25, padding-bottom);
          font-family: PingFang SC;
          font-weight: 400;
          color: #ffffff;
          .fs(24);
        }
      }

      .body_center {
        background: url("https://img.xunyinjiaoyou.com/static/activity/MayDay/bg2.png");
        background-size: contain;
        width: 100%;
        display: flex;
        margin-top: -1px;
        .pxToVW(810, height);
        flex-direction: column;
        align-items: center;
        overflow-y: scroll;

        .darone {
          .pxToVW(342);
          .pxToVW(86, height);
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;
          flex-shrink: 0;

          img {
            position: absolute;
            width: 100%;
          }

          span {
            z-index: 10;
            font-family: PingFang SC;
            font-weight: 400;
            color: #ffffff;
            .fs(34);
          }
        }

        .jiangli_gift {
          .pxToVW(540);
          .pxToVW(258, height);
          margin: @auto;
          .pxToVW(30, margin-top);
          .pxToVW(30, margin-bottom);
          display: flex;
          justify-content: space-between;
          flex-shrink: 0;

          .bg_imgkuang {
            flex-shrink: 0;
            .pxToVW(226);
            .pxToVW(258, height);
            background: url("https://img.xunyinjiaoyou.com/static/activity/MayDay/gift_frame_top.png") no-repeat;
            background-size: contain;
            display: flex;
            flex-direction: column;

            .gift_icon {
              width: 100%;
              .pxToVW(178, height);
              display: flex;
              justify-content: center;
              align-items: center;
              position: relative;

              .liaohoa {
                .pxToVW(162);
                .pxToVW(125, height);
              }

              img {
                position: absolute;
                top: 10px;
                .pxToVW(172);
                .pxToVW(172, height);
              }
            }

            .gift_bottom {
              .pxToVW(224);
              .pxToVW(80, height);
              display: flex;
              align-items: center;
              justify-content: center;
              background: url("https://img.xunyinjiaoyou.com/static/activity/MayDay/gift_frame_down.png") no-repeat;
              background-size: contain;

              span {
                font-family: PingFang SC;
                font-weight: 400;
                color: #ffffff;
                .fs(30);
              }
            }
          }
        }
      }
    }
  }

  /deep/ .van-popup {
    overflow: inherit;
    background: 00000000;
  }
</style>